
<html>
<head>
    <title>Title</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 178px;
            height: 178px;
            line-height: 178px;
            text-align: center;
        }
        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">


    <!--查询搜索-->
    <el-form :inline="true" :model="ReservationVo" class="demo-form-inline">
        <el-form-item label="名称">
            <el-input v-model="ReservationVo.name" placeholder="患者名"></el-input>
        </el-form-item>
        <el-form-item label="真实名称">
            <el-input v-model="ReservationVo.visit_time" placeholder="预约时间"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <el-table
            :data="tableData"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="50">
        </el-table-column>
        <el-table-column
                prop="idcard"
                label="身份证"
                width="180">
        </el-table-column>
        <el-table-column
                prop="name"
                label="患者姓名">
        </el-table-column>
        <el-table-column
                prop="sex"
                label="性别">
        </el-table-column>
        <el-table-column
                prop="tel"
                label="电话">
        </el-table-column>
        <el-table-column
                prop="visitTime"
                label="预约时间">
        </el-table-column>
        <el-table-column
                prop="duty.price"
                label="价格">
        </el-table-column>
        <el-table-column
                label="科室">
            {{sectionName}}
        </el-table-column>

        <el-table-column
                prop="isvisit"
                label="状态"
                sortable
                width="180">
            <template slot-scope="scope">
                <el-tag type="danger" effect="dark" v-if="scope.row.isvisit=='0'">待处理</el-tag>
                <el-tag type="success" effect="dark" v-if="scope.row.isvisit=='1'">已处理</el-tag>
                <el-tag type="warning" effect="dark" v-if="scope.row.isvisit=='2'">预约已过期</el-tag>
            </template>
        </el-table-column>

    </el-table>

    <!--分页-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
    </el-pagination>
</div>
</body>
<script>
    var app=new Vue({
        el:"#app",
        data:{
            tableData:[],
            currentPage:1,
            pageSize:5,
            total:0,
            ReservationVo:{},

            sectionName:'',

        },
        created(){
            this.initTable();

        },
        methods:{


            //分页
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
                this.PageSize=val;
                this.initTable();
            },
            handleCurrentChange(val) {
                console.log(`当前页: ${val}`);
                this.currentPage=val
                this.initTable();
            },

            //搜索框查询
            onSubmit(){
                this.currentPage=1;
                this.initTable();
            },

            initTable(){
                axios.post("/reservation/reservationList?currentPage="+this.currentPage+"&pageSize="+this.pageSize+"&account="+416300,this.ReservationVo).then(resp=>{
                    console.log(resp);
                    this.tableData=resp.data.data.info.list;
                    this.sectionName = resp.data.data.sections[0].name;
                    this.total=resp.data.data.info.total;
                });
            },

        }
    })
</script>
</html>
